<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="fn">切换</button>
    <one v-if="index===0"></one>
    <two v-else-if="index===1"></two>
    <three v-else-if="index===2"></three>
    <hr/>
    <component :is="arr[index]"></component>
</div>
</body>
<script>
    // is属性的值是一个字符串，代表组件的名字。
	new Vue({
		el: "#root",
        data:{
		    index:0,
            arr:["one","two","three"]
        },
        methods:{
			fn(){
				if(++this.index>2) this.index=0;
				// this.index++;
				// if(this.index>2){
				// 	this.index=0
                // }
            }
        },
        components:{

			One:{
				template:(`
				    <p style="background:green;">one</p>
				`)
            },
			Two:{
				template:(`
				    <p style="background:red;">Two</p>
				`)
			},
			Three:{
				template:(`
				    <p style="background:pink;">Three</p>
				`)
			}
        }
	})
</script>
</html>